<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('菜单列表')" />
</head>
<body>

<div id="app_layer" v-cloak >
    <div class="main" v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-input type="hidden" v-model="form.id"></el-input>
            <el-form-item prop="parent_id" label="归属：">
                <el-select v-model="form.parent_id" placeholder="请选择">
                    <el-option label="作为顶级的菜单" key="0" :value="0"></el-option>
                    <el-option
                            v-for="item in top_menu_list"
                            :key="item.value"
                            :label="item.menu_name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="menu_name" label="名称：">
                <el-input v-model="form.menu_name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="描述：">
                <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item prop="menu_type" label="类型：">
                <el-radio v-model="form.menu_type" :label="0">菜单</el-radio>
                <el-radio v-model="form.menu_type" :label="1">目录</el-radio>
                <el-radio v-model="form.menu_type" :label="2">按钮</el-radio>
            </el-form-item>
            <el-form-item prop="perms" label="权限字符串：">
                <el-input v-model="form.perms" placeholder="请输入权限字符串"></el-input>
            </el-form-item>
            <el-form-item label="图标字符串：">
                <el-input v-model="form.icon" placeholder="用于导航前的图标，例如输入：el-icon-s-home"></el-input>
            </el-form-item>
            <el-form-item label="跳转地址：">
                <el-input v-model="form.url" placeholder="例如：/user/user_list.html，仅用于菜单。"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="form.order_num" style="width: 100px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onSubmit('form')">点击提交</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>

<script>
    new Vue({
        el: '#app_layer',
        data(){
            return {
                loading:false,
                rules:{
                    parent_id: [
                        {required: true, message: '请选择归属', trigger: 'change'},
                    ],
                    menu_name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                    menu_type:[
                        {required: true, message: '请选择类型', trigger: 'change'}
                    ],
                    perms:[
                        {required: true, message: '请输入权限字符串', trigger: 'blur'}
                    ],
                },
                form:[(${data})],
                top_menu_list:[(${top_menu_list})],

            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('/system/save_sys_menu',this.form).then(function (res){
                            that.loading = false;
                            let data = res.data;
                            if(data.code==false){
                                parent.vm.add_res(data.msg,'error');
                            }else{
                                parent.vm.add_res(data.msg,'success');
                                parent.drawer_layer_close();
                            }
                        }).catch(function(error){
                            that.loading = false;
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    })
</script>

</body>
</html>